<template>
  <div class="Mybox">
    <div class="Mytitle">
      <div class="title1">
        <img src="../img/我的头像/展示图_u5206.png" alt="" />
        <div class="title2">
          <p class="title21">OMINI.BASS</p>
          <p>18801558965</p>
        </div>
        <div class="tltle3">
          <van-icon
            class="iconfont"
            class-prefix="icon"
            name="xiaoxizhongxin"
            size=" 5.2vw"
            @click="Mymsgcenter"
          />
          <van-icon @click="SheZhi" name="setting-o" class="icon1" />
        </div>
      </div>
      <div class="Myzichan">
        <p>总资产(币)</p>
        <p>4056.89</p>
      </div>
      <p class="Mytixian" @click="tixianrouter">提现 &nbsp; ></p>
      <p class="Mymingxi" @click="to">收支明细 &nbsp; ></p>
    </div>
    <div class="Mymain">
      <p class="huishou">回收订单</p>
      <van-grid :border="false" >
        <van-grid-item to="/Recallorder?num=0" @click.prevent="fun4">
          <van-icon
            class="iconfont"
            class-prefix="icon"
            name="yijiedan"
            size="5vw"
            color="#02e4f3"
            
          />
          <span>待接单</span>
        </van-grid-item>
        <van-grid-item to="/Recallorder?num=1" @click.prevent="fun5">
          <van-icon
            class="iconfont"
            class-prefix="icon"
            name="daishouhuofuben"
            color="#02e4f3"
            size="5vw"
          />
          <span>已接单</span>
        </van-grid-item>
        <van-grid-item to="/Recallorder?num=2" @click.prevent="fun6">
          <van-icon
            class="iconfont"
            class-prefix="icon"
            name="daishouhuofuben"
            color="#02e4f3"
            size="5vw"
          />
          <span>收货中</span>
        </van-grid-item>
        <van-grid-item to="/Recallorder?num=3" @click.prevent="fun7">
          <van-icon
            class="iconfont"
            class-prefix="icon"
            name="yiwancheng"
            size="5vw"
            color="#02e4f3"
          />
          <span>已完成</span>
        </van-grid-item>
      </van-grid>
      <p class="duihuan">兑换订单</p>
      <van-grid :border="false" icon-size="2.4vw">
        <van-grid-item to="/Orderofexchange?num=0" @click.prevent="fun(1)" >
          <van-icon
            class="iconfont"
            class-prefix="icon"
            name="caiwu"
            size="5vw"
            color="#ff6600"
          />
          <span>待支付</span>
        </van-grid-item>

        <van-grid-item to="/Orderofexchange?num=1" @click.prevent="fun1">
          <van-icon
            class="iconfont"
            class-prefix="icon"
            name="daishouhuo"
            size="5vw"
            color="#ff6600"
          />
          <span>待取货</span>
        </van-grid-item>

        <van-grid-item to="/Orderofexchange?num=2" @click.prevent="fun2">
          <van-icon
            class="iconfont"
            class-prefix="icon"
            name="shizhong"
            size="5vw"
            color="#ff6600"
          />
          <span>配送中</span>
        </van-grid-item>

        <van-grid-item to="/Orderofexchange?num=3" @click.prevent="fun3">
          <van-icon
            class="iconfont"
            class-prefix="icon"
            name="yiwancheng"
            size="5vw"
            color="#ff6600"
          />
          <span>已完成</span>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="Mymaintwo">
      <p class="chagnyong">常用功能</p>

      <div class="iconku"  >
        <van-grid :border="false" icon-size="2.4vw"   >
              
          <van-grid-item to="/Mycollect"  @click="collect"
             >
            <van-icon
              class="iconfont"
              class-prefix="icon"
              name="shoucang"
              size="5.5vw"
              color="red"
            />
            <span >我的收藏</span>
          </van-grid-item>
          <van-grid-item to="/Myfootprint">
            <van-icon
              class="iconfont"
              class-prefix="icon"
              name="wodezj"
              color="red"
              size="5.5vw"
            />
            <span>足迹</span>
          </van-grid-item>
          <van-grid-item to="/Mycontribution">
            <van-icon
              class="iconfont"
              class-prefix="icon"
              name="xunzhang"
              size="5.5vw"
              color="#fc8b8d"
            />
            <span>我的贡献</span>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { getUnpaid,getReorder,getMyCollections } from "../api/index"
import { ExchangeInfo, } from "../stores/ExchangeOrder"
import { useLoginStore } from '../stores/login'
import { useCounterStore } from '../stores/counter'
import { ref } from "vue";

const stores2 = useLoginStore()
const stores3 = useCounterStore()
const stores = ExchangeInfo()
const router = useRouter();

const tixianrouter = () => {
  router.push("/Withdrawdeposit");
};

const Mymsgcenter = () => {
  router.push("/Mymsg");
};

function to() {
  router.push("/MyIE");
}



// 我的收藏
function collect() {

  getMyCollections(localStorage.token).then((res)=>{

    stores3.mycollect=res.data.data.data
    
  })
}



// 回收订单

const fun4 = () =>{
  getReorder(localStorage.token,"待支付").then((res)=>{
    stores.data = res.data.data.data
    
  })
} 

const fun5 = () =>{
  getReorder(localStorage.token,"待取货").then((res)=>{
    stores.data = res.data.data.data
    
  })
} 
const fun6 = () =>{
  getReorder(localStorage.token,"配送中").then((res)=>{
    stores.data = res.data.data.data
    
  })
} 
const fun7 = () =>{
  getReorder(localStorage.token,"已完成").then((res)=>{
    stores.data = res.data.data.data
    
  })
} 


// 兑换订单
// 待支付


const fun = (a) =>{
  getUnpaid(localStorage.token,"待支付").then((res) =>{
      stores.data = res.data.data.data
     




    })
}

// 带取货
const fun1 = () =>{
  getUnpaid(localStorage.token,"待取货").then((res) =>{
      stores.data = res.data.data.data
    })
    
}

// 配送中
const fun2 = () =>{
  getUnpaid(localStorage.token,"配送中").then((res) =>{
      stores.data = res.data.data.data
    })
}

// 已完成
const fun3 = () =>{
  getUnpaid(localStorage.token,"已完成").then((res) =>{
      stores.data = res.data.data.data
    })

}

// 点击设置标签
const SheZhi = () => {
  router.push({
    path: "/SetUp",
  });
};
</script>

<style lang="less" scoped>
.Mybox {
  background-color: #eafff8;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.Mytitle {
  height: 38.667vw;
  width: 100vw;
  background-color: #2bcddc;

  .title1 {
    display: flex;
    margin-top: 4.667vw;
    margin-left: 4.667vw;
    position: relative;

    .title2 {
      margin-left: 3.667vw;
      color: white;
      font-weight: bolder;

      .title21 {
        font-size: 5.2vw;
        margin-bottom: 2vw;
      }
    }

    .tltle3 {
      position: absolute;
      right: 0px;
      font-size: 5.2vw;
      color: white;

      .icon1 {
        margin-left: 3.333vw;
        margin-right: 1.867vw;
      }
    }
  }

  .Myzichan {
    color: white;
    margin-top: 3vw;
    margin-left: 5.667vw;
    position: relative;

    :first-child {
      font-size: 1.333vw;
      margin-bottom: 3.333vw;
    }

    :last-child {
      font-size: 5.2vw;
    }
  }

  .Mytixian {
    width: 16.333vw;
    height: 6.333vw;
    position: absolute;
    right: 0px;
    top: 19.667vw;
    text-indent: 2.667vw;
    background-color: #9ae9ed;
    color: white;

    // border-radius: 40%;
    font-size: 1.333vw;
    line-height: 6.333vw;
    border-radius: 3.15vw 0 0 3.15vw;
  }

  .Mymingxi {
    width: 22.333vw;
    height: 6.333vw;
    position: absolute;
    font-size: 1.333vw;
    line-height: 6.333vw;
    background-color: #9ae9ed;
    color: white;
    right: 0px;
    top: 27.933vw;
    text-indent: 2.667vw;
    border-radius: 3.15vw 0 0 3.15vw;
  }
}

.Mymain {
  width: 100vw;
  height: 53.667vw;
  border-radius: 8%;
  background-color: white;
  margin-bottom: 1.6vw;
  margin-top: -1.333vw;

  span {
    margin-top: 1.8vw;
    font-size: 1.733vw;
  }

  .huishou {
    margin-top: 2vw;
    margin-left: 5.333vw;
    font-size: 4.2vw;
    font-weight: bolder;
    border-left: 1.007vw solid tomato;
    padding-left: 1.067vw;
  }

  .duihuan {
    margin-left: 5.333vw;
    font-weight: bolder;
    font-size: 4.2vw;

    border-left: 1.007vw solid tomato;
    padding-left: 1.067vw;
  }
}

.Mymaintwo {
  width: 100vw;
  flex: 1;

  background-color: white;
  border-radius: 5%;

  .chagnyong {
    margin-top: 2vw;
    margin-left: 5.333vw;
    font-weight: bolder;
    margin-bottom: 3vw;
  }
}

.iconku {
  span {
    margin-top: 1.567vw;
    font-size: 1.733vw;
  }
}
</style>
